<template>
  <div class="body">
    <div class="search-body">
      <el-popover
        placement="bottom"
        width="780"
        trigger="manual"
        v-model="visible"
      >
        <div>
          <ss-search v-if="ecVisible" :titleType="interfaceType"> </ss-search>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </div>
        <el-input
          @focus="inputFocus"
          @blur="inputBlur"
          @input="inputChange"
          v-model="inputValue"
          placeholder="请输入账单/欠费/集团进度"
          style="width:200px"
          slot="reference"
        ></el-input>
      </el-popover>
    </div>
    <div class="components-body">
      <span class="bg">按钮组件:</span>
      <div>
        <ss-button tag="span" class="bg-cyan">文本</ss-button>
        <ss-button radius="mc"> 小圆角 </ss-button>
        <ss-button radius="sc"> 半圆角 </ss-button>
        <ss-button size="sm"> 小尺寸 </ss-button>
        <ss-button size="md" color="red" @click="onClick"> 中尺寸 </ss-button>
        <ss-button class="bg-green" size="lg" @click="iFrameOnClick">
          iFrame
        </ss-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "test",
  computed: {},
  data() {
    return {
      inputValue: "",
      visible: false,
      url: "",
      ecVisible: false,
      showToast: false,
      interfaceType: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
  methods: {
    onClick(event) {
      this.$Toast("点击了中尺寸按钮");
    },
    iFrameOnClick() {
      this.$router.push("test2");
    },
    inputFocus() {
      this.visible = true;
    },
    inputChange(val) {
      console.log("inputChange:" + val);
      this.interfaceType = "";
      if (val === "账单") {
        this.interfaceType = "group-bill";
      } else if (val === "欠费") {
        this.interfaceType = "group-owe";
      } else if (val === "集团进度") {
        this.interfaceType = "group-busi";
      }
      if (this.interfaceType) {
        this.ecVisible = true;
      } else {
        this.ecVisible = false;
      }
    },
    inputBlur() {
      console.log("inputBlur..");
      // this.visible = false;
    },
  },
  mounted() {
    // 对应的B项目的某个被嵌套页面的具体路由地址
    this.url = "http://0.0.0.0:8000/search";
  },
};
</script>

<style lang="less" scoped>
/deep/.el-popover {
  padding: 0;
  margin: 0;
}
.body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bg {
  margin-right: 20px;
}
.search-body {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.components-body {
  margin-top: 280px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
